import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import {Image} from "expo-image";
import activityIcon from "@/assets/images/releaseImg/activityIcon.png";
import groupIcon from "@/assets/images/releaseImg/groupIcon.png"
import rightIcon from "@/assets/images/releaseImg/rightIcon.png"
import {scaleSize} from "@/utils/screenSize";
import {router} from "expo-router";
import {getUserInfoDetail} from "@/store/slices/loginSlice";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "@/store";
import {getToken} from "@/utils";
import {resetInputData, setCreateActivityType} from "@/store/slices/createActiveSilce"
import { setRegisterStatus } from "@/store/slices/registerGroupSlice"

const releaseScreen = () => {

    const [isLogin, setIsLogin] = useState(false);
    const dispatch = useDispatch<AppDispatch>();
    const login = useSelector((state: RootState) => state.login);

    const goCreateActivity = async function () {
        const token = await getToken();
        if (token) {
            dispatch(resetInputData())
            dispatch(setCreateActivityType({ createActivityType: "create" }))
            router.push("/createActivity?from=createActivity")
        } else {
            router.push("/login")
        };


    };

    const goRegisterGroup = async function () {
        const token = await getToken();
        if (token) {
            dispatch(setRegisterStatus({ registerStatus: "create" }))
            router.push('/registerGroup')
        } else {
            router.push("/login")
        };

    };

    const goLogin = function () {
        router.push("/login")
    };

    const checkHasTokenStatus = async () => {
        const token = await getToken();
        if (token) {
            setIsLogin(true);
        };
    };

    useEffect(() => {
        dispatch(getUserInfoDetail());
        checkHasTokenStatus();

    }, [])

    useEffect(() => {
        console.log('login', login)
    }, [login])


    return (
      <View style={styles.releaseContainer}>
         <LinearGradient
             // 增强渐变色的对比度
             colors={['#FDF1ED', '#FFFCFB', '#FFFFFF']}
             // 设置渐变色的位置
             locations={[0, 0.5, 1]}
             // 设置渐变的起始和结束点（0表示顶部，1表示底部）
             start={{ x: 0, y: 0 }}
             end={{ x: 0, y: 1 }}
             style={styles.releaseWrap}
             >
             <View  style={styles.releaseList}>
                 <TouchableOpacity style={styles.navItem} onPress={goCreateActivity}>
                     <View style={styles.navImg}>
                         <Image source={activityIcon} style={{ width: "100%", height: "100%" }}/>
                     </View>
                     <View style={styles.navContent}>
                         <View style={styles.navTitle}>
                             <Text style={styles.navTitleText}>发布活动</Text>
                         </View>
                         <View style={styles.navTitleDes}>
                             <Text style={styles.navTitleDesText}>多少恨，昨夜梦魂中。还似旧时游</Text>
                         </View>
                     </View>
                     <View style={styles.rightIcon}>
                         <Image source={rightIcon}style={{ width: "100%", height: "100%" }} />
                     </View>
                 </TouchableOpacity>
                 <TouchableOpacity onPress={goRegisterGroup}>
                     <View style={styles.navItem}>
                         <View style={styles.navImg}>
                             <Image source={groupIcon} style={{ width: "100%", height: "100%" }}/>
                         </View>
                         <View style={styles.navContent}>
                             <View style={styles.navTitle}>
                                 <Text style={styles.navTitleText}>登记社群</Text>
                             </View>
                             <View style={styles.navTitleDes}>
                                 <Text style={styles.navTitleDesText}>多少恨，昨夜梦魂中。还似旧时游</Text>
                             </View>
                         </View>
                         <View style={styles.rightIcon}>
                             <Image source={rightIcon}style={{ width: "100%", height: "100%" }} />
                         </View>
                     </View>
                 </TouchableOpacity>
             </View>
         </LinearGradient>
          {
             !isLogin && (
                  <View style={styles.unLoginContainer}>
                      <View>
                          <Text style={styles.goLoginTitle}>终于等到你，快来登录吧</Text>
                      </View>
                      <TouchableOpacity onPress={goLogin}>
                          <View style={styles.goLogin}>
                              <Text style={styles.goLoginText}>马上登录</Text>
                          </View>
                      </TouchableOpacity>
                  </View>
              )
          }
      </View>
    );
};

const styles = StyleSheet.create({
    releaseContainer: {
        flex: 1,
    },
    releaseWrap: {
        flex: 1,
        // paddingTop: 500,
        position: "relative",
    },
    navItem: {
        width: scaleSize(327),
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 18,
        paddingHorizontal: 14,
        backgroundColor: "#FFF",
        marginHorizontal: 24,
        borderWidth: 0.5,
        borderColor: "#E4E6EC",
        borderRadius: 10,
        shadowColor: 'rgba(149, 157, 165, 0.2)', // 阴影颜色
        shadowOffset: { width: 0, height: 8 },   // 阴影偏移量
        shadowOpacity: 1,                        // 阴影不透明度
        shadowRadius: 24,                        // 阴影模糊半径
        // 阴影效果配置（Android）
        elevation: 10, // 可以调整此值以匹配 iOS 的阴影效果
        marginBottom: 18
    },
    navImg: {
        width: 44,
        height: 44,
    },
    rightIcon: {
        width: 14,
        height: 14,
    },
    navContent: {
        flex: 1,
        marginLeft: 10,
    },
    navTitle: {
        marginBottom: 4,
    },
    navTitleText: {
        color: "#2A2B30",
        fontWeight: "bold",
    },
    navTitleDes: {
    },
    navTitleDesText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    releaseList: {
       position: "absolute",
        flex: 1,
        bottom: 45,
    },
    unLoginContainer: {
        position: "absolute",
        bottom: 0,
        width: "100%",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: "#FFEFEB",
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 12,
        paddingRight: 12,
    },
    goLoginTitle: {
        fontSize: 14,
        color: "#EC6138"
    },
    goLogin: {
        width: 72,
        height: 24,
        backgroundColor: "#EC6138",
        borderRadius: 12,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    goLoginText: {
        color: "#fff",
        fontSize: 12,
    },

});

export default releaseScreen;
